

Vue.createApp({
    // 定义组件
    components: {
        'left-nav': LEFT_NAV
    },
    // 初始化
    setup() {
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            menu: [
                {
                    name: "分类"
                },
                {
                    name: "创作"
                },
                {
                    name: "热门"
                },
            ],
            articles: [],
            hotArticle: [],
            user: {},
            userModels: []
        })
        $.get("/loginUser", function (data) {
            state.user = data
            get("/userModel/searchByUserId/" + data.userId, function (data) {
                // 格式化数据
                let d = []
                data.forEach(e => {
                    let u = e.userModel
                    d.push({
                        name: e.classify.name,
                        value: u.views + 2 * u.likes + 3 * u.comments + 4 * u.rewards + u.viewDuration
                    })
                })
                state.userModels = d
                // 绘制图形
                drawPie(d)
            })
            $.get("/getArticlesByUserId/" + data.userId, function (data) {
                    let ans = []
                    data.forEach(e => {
                        //  ["标题", "获赞", "评论", "打赏"]
                        ans.push({
                            '标题': e.title.substring(0, 8),
                            '获赞': e.likes,
                            '评论': e.comments,
                            '打赏': e.rewards,
                            '浏览': e.views,
                        })
                    })
                    state.articles = ans
                    console.log(ans);
            });
        });
        get("/getHotArticle", function (data) {
            let ans = []
            data.forEach(e => {
                //  ["标题", "获赞", "评论", "打赏"]
                ans.push({
                    '标题': e.title.substring(0, 8),
                    '获赞': e.likes,
                    '评论': e.comments,
                    '打赏': e.rewards,
                    '浏览': e.views,
                })
            })
            state.hotArticle = ans
            console.log(ans);

        })
        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods: {
        setShowIndex(index) {
            if (index == 0) {
                drawPie(this.userModels)
            } else if (index == 1) {
                drawMultiBar("创作", articleChart, this.articles)
            } else if (index == 2) {
                drawMultiBar("热门", hotArticleChart, this.hotArticle)
            }
        }
    },
    mounted() {
        exchangeDisplay("#analysis .leftNav li", "#analysis #main>div")
    }
    // 绑定app
}).mount("#analysis")

var classifyChart = echarts.init(document.getElementById('classify'));
var articleChart = echarts.init(document.getElementById('article'));
var hotArticleChart = echarts.init(document.getElementById('hotArticle'));
// 绘制饼图
function drawPie(data) {
    let option = {
        title: {
            text: '分类喜好',
            left: 'center',
            top: 'bottom'
        },
        series: [
            {
                type: 'pie',
                data: data,
                roseType: 'area'
            }
        ]
    };
    classifyChart.setOption(option)
}
// 绘制条形图
function drawBar(title, data) {
    let option = {
        title: {
            text: '文章观星',
            left: 'center',
            top: 'top'
        },
        xAxis: {
            data: title
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: data
            }
        ]
    };
    articleChart.setOption(option)
}

function drawMultiBar(title, target, source) {
    let subTitle = ["标题", "获赞", "评论", "打赏", "浏览"]
    let option = {
        legend: {},
        tooltip: {},
        title: {
            text: title,
            left: 'center',
            top: 'bottom'
        },
        dataset: [
            {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
                // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。
                dimensions: subTitle,
                source: source
            },
            {
                transform: {
                    type: 'sort',
                    // 按分数排序
                    // config: { dimension: 'score', order: 'asc' }
                }
            }
        ],
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
            { type: 'bar' }, 
            { type: 'bar' },
            { type: 'bar' },
            // { type: 'bar' },
            ]
    };
    target.setOption(option)
}
function drawArticleBar(data) {
    let title = [
        "点赞",
        "评论",
        "打赏"
    ]
    drawBar(title, data)
}